<template>
    <div class="tab-content">
        <!-- 共享换电 -->
        <div class="instantaneous-power-section">
            <el-form ref="rentalFormRef" :model="rentalForm" :rules="rentalRules" label-width="150px" class="config-form">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="换电柜总量" prop="totalBatterySwap">
                            <el-input-number v-model="rentalForm.totalBatterySwap" placeholder="请输入换电柜总量" :controls="false" />
                            <span style="margin-left: 8px; color: #909399;">个</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电池总量" prop="totalBattery">
                            <el-input-number v-model="rentalForm.totalBattery" placeholder="请输入电池总量" :controls="false" />
                            <span style="margin-left: 8px; color: #909399;">kWh</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="总换电量" prop="totalElectricitySwap">
                            <el-input-number v-model="rentalForm.totalElectricitySwap" placeholder="请输入总换电量" :controls="false"/>
                            <span style="margin-left: 8px; color: #909399;">kWh</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总换电次数" prop="totalBatterySwapTimes">
                            <el-input-number v-model="rentalForm.totalBatterySwapTimes" placeholder="请输入总换电次数" :controls="false" />
                            <span style="margin-left: 8px; color: #909399;">次</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            
            <div class="data-form-container">
                <el-form :model="sharedSwapForm" label-width="0" ref="sharedSwapFormRef">
                    <div class="hour-grid">
                        <div v-for="(item, index) in sharedSwapForm.data" :key="index" class="hour-item">
                            <div class="hour-card">
                                <div class="hour-header">
                                    <span class="time-label">{{ item.label }}</span>
                                    <el-button size="small" type="text" @click="resetHourValue(item)" class="reset-btn">重置</el-button>
                                </div>
                                <div class="hour-input">
                                    <el-input-number 
                                        v-model="item.value" 
                                        :min="0" 
                                        :max="2000" 
                                        :step="10"
                                        size="small"
                                        class="value-input"
                                        controls-position="right"
                                    />
                                    <span class="unit-label">kW</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="save-button-container">
            <el-button type="primary" @click="saveNotificationData">保存共享换电配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive, defineProps, onMounted } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getDataClassifyDetail, updateDataClassify } from '@/api/port'


    const sharedSwapForm = ref({
        data: [{
            label: '0-3次',
            value: 0
        },{
            label: '4-7次',
            value: 0
        },{
            label: '8-12次',
            value: 0
        },{
            label: '13-15次',
            value: 0
        },{
            label: '16-18次',
            value: 0
        },{
            label: '18次以上',
            value: 0
        }]
    })

    // 重置单个小时的数值
    const resetHourValue = (item: any) => {
        item.value = 0
        ElMessage.success(`${item.time}数据已重置！`)
    }


    // 模块2: 租赁数据配置表单
    const rentalForm = ref({
        totalBatterySwap: 0, // 换电柜总量
        totalBattery: 0, // 电池总量
        totalElectricitySwap: 0, // 总换电量
        totalBatterySwapTimes: 0, // 总换电次数
    })

    // 数字范围验证函数
    const validateNumber = (rule: any, value: number, callback: (error?: Error) => void) => {
        if (value === null || value === undefined) {
            callback(new Error('请输入数字'))
        } else if (value < 0) {
            callback(new Error('请输入大于等于0的数字'))
        } else if (value > 1000000) {
            callback(new Error('请输入小于等于1000000的数字'))
        } else {
            callback()
        }
    }

    // 表单验证规则
    const rentalRules = {
        totalBatterySwap: [
            { required: true, message: '换电柜总量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        totalBattery: [
            { required: true, message: '电池总量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        totalElectricitySwap: [
            { required: true, message: '总换电量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        totalBatterySwapTimes: [
            { required: true, message: '总换电次数不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ]
    }
    // 保存函数
    const rentalFormRef = ref()
    const sharedSwapFormRef = ref()
    const saveNotificationData = async () => {
        if (!rentalFormRef.value) return
        
        try {
            await rentalFormRef.value.validate()
            let obj = {
                rentalForm: rentalForm.value,
                sharedSwapForm: sharedSwapForm.value.data
            }
            
            await updateDataClassify({
                id: 1,
                key: 'module6',
                value: obj
            })
            console.log('保存租赁数据配置:', obj)

            ElMessage.success('租赁数据配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if (module && module.rentalForm) {
            rentalForm.value = {
                totalBatterySwap: module.rentalForm.totalBatterySwap || 0,
                totalBattery: module.rentalForm.totalBattery || 0,
                totalElectricitySwap: module.rentalForm.totalElectricitySwap || 0,
                totalBatterySwapTimes: module.rentalForm.totalBatterySwapTimes || 0
            }
        }
        if (module && module.sharedSwapForm) {
            sharedSwapForm.value.data = module.sharedSwapForm
        }
    }
    defineExpose({
        init
    })
</script>
<style scoped>
    .unit-label {
        color: #666;
        font-size: 12px;
        font-weight: 500;
        margin-left: 10px;
    }

    /* 24小时瞬时功率数据配置样式 */
.instantaneous-power-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.instantaneous-power-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 24px;
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    border-radius: 8px;
    /* border: 1px solid #dee2e6; */
}

.instantaneous-power-section .section-header h3 {
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.instantaneous-power-section .header-actions {
    display: flex;
    gap: 8px;
}

.instantaneous-power-section .data-form-container {
    padding: 16px;
}

.instantaneous-power-section .hour-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.instantaneous-power-section .hour-item {
    width: 100%;
}

.instantaneous-power-section .hour-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.instantaneous-power-section .hour-card:hover {
    background: #e3f2fd;
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.instantaneous-power-section .hour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.instantaneous-power-section .time-label {
    font-weight: 600;
    color: #409eff;
    background: #ecf5ff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.instantaneous-power-section .hour-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.instantaneous-power-section .value-input {
    flex: 1;
}

.instantaneous-power-section .unit-label {
    color: #666;
    font-size: 12px;
    font-weight: 500;
}

.instantaneous-power-section .reset-btn {
    color: #f56c6c;
    font-size: 11px;
    padding: 2px 6px;
    min-height: auto;
}

.instantaneous-power-section .reset-btn:hover {
    background-color: #fef0f0;
    color: #f56c6c;
}

@media (max-width: 1200px) {
    .instantaneous-power-section .hour-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .instantaneous-power-section .hour-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .instantaneous-power-section .hour-grid {
        grid-template-columns: 1fr;
    }
}
</style>